'use strict';

import React, { Component } from 'react';
import CustomButton from '../usefulcomponent/customButton';
import * as MColor from '../../config/meterialColor';

import {
  StyleSheet,
  	View,
  	Text,
  	TouchableNativeFeedback,
    NativeModules
} from 'react-native';

class topbar extends Component {
	constructor(props) {
	  super(props);
	
	  this.state = {
	  	isBluetoothSocketLink:false,//一开始是没有连接蓝牙socket的
	  };
	}
	_linkonpress(){
		if(this.state.isBluetoothSocketLink){//如果已经打开了蓝牙socket就关闭蓝牙socket
			NativeModules.BluetoothAndroid.socketclose();//发送一个数据
		}else{//如果没有打开蓝牙socket，就打开蓝牙socket
			NativeModules.BluetoothAndroid.getBondedDevices();//获取已经配对的设备
	    	NativeModules.BluetoothAndroid.socketconnet();//用匹配到的蓝牙设备作为serve端进行socket连接
		}
		//反转让按钮的字从连接变为断开，或者断开变连接
		this.setState({
			isBluetoothSocketLink:!this.state.isBluetoothSocketLink
		})
	}

	render() {
	    return (
	      <View style={styles.contain}>
	      	<View style={styles.title}><Text style={styles.titletext}>请选择要更新的程序</Text></View>
	      	<View style={styles.button}>
				<TouchableNativeFeedback onPress={this._linkonpress.bind(this)}>
					<View style={styles.buttonview}>
	        			<Text style={{fontSize:15,padding:3,color:'white'}}>
	        				{this.state.isBluetoothSocketLink ? '断开' : '连接'}
	        			</Text>
	      			</View>
				</TouchableNativeFeedback>
	      	</View>
	      </View>
	    );
	}
}

const styles = StyleSheet.create({
	contain:{
		flex:1,
		flexDirection:'row',
		alignItems:'center',
		justifyContent:'space-around'
	},
	title:{
		flex:3,
		justifyContent:'center',
		alignItems:'center',
	},
	titletext:{
		fontSize:20,
		color:'white'
	},
	button:{
		flex:1
	},
	buttonview:{
		padding:6,
		justifyContent:'center',
		alignItems:'center',
		backgroundColor:MColor.ACCENT_COLOR,
		elevation:10,

	},
});


export default topbar;